<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryParams" :model="queryParams">
          <el-row :gutter="48">
            <el-col :span="6">
              <el-form-item label="活动名称" prop="activityName">
                <el-input
                  v-model="queryParams.activityName"
                  placeholder="请输入昵称"
                  class="w-100"
                  @keyup.enter.native="handleQuerys"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="活动日期" prop="date">
                <el-date-picker
                  v-model="queryParams.date"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuerys">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="table_card">
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">活动列表</div>
        <div class="op_right">
          <button class="primary_button" @click="NewActivity">新增活动</button>
        </div>
      </div>

      <div class="table_list">
        <el-table :data="tabList" stripe>
          <el-table-column
            prop="activityName"
            label="活动名称"
          ></el-table-column>
          <el-table-column
            prop="activityTimeStart"
            label="活动开始时间"
          ></el-table-column>
          <el-table-column
            prop="activityTimeEnd"
            label="活动结束时间"
          ></el-table-column>
          <el-table-column
            prop="activityTypeName"
            label="活动类型"
          ></el-table-column>
          <el-table-column label="操作" width="300px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="UpdatesActivity(scope.row)"
                >编辑</el-button
              >
              <span class="separate_right">|</span>
              <el-button size="mini" type="text" @click="DelActivity(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 新增活动 -->
      <el-dialog
        :visible.sync="userdialogVisible"
        width="1100px"
        :title="title"
        class="no-dialog-padding"
        label-width="100px"
        @close="CanceluserSubmit"
      >
        <!-- 新年活动 -->
        <div class="newyear_activity">
          <div class="formBox">
            <el-form
              :model="ActivityForm"
              :rules="ActivityRules"
              ref="ActivityForm"
              class="demo-ruleForm"
            >
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-form-item label="活动类型" prop="activityType">
                    <el-select
                      v-model="ActivityForm.activityType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in ActivityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="活动名称" prop="activityName">
                    <el-input
                      v-model="ActivityForm.activityName"
                      type="datetime"
                      placeholder="请输入活动名称"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="6"
                  v-if="ActivityForm.activityType === 'MEMBER_DAY'"
                >
                  <el-form-item label="会员日活动折扣" prop="discount">
                    <el-input-number
                      v-model="ActivityForm.discount"
                      :precision="0"
                      :step="1"
                      :min="1"
                      :max="100"
                      placeholder="请输入会员日活动折扣"
                      class="w-100 text-left"
                      :controls="false"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="8"
                  v-if="
                    ActivityForm.activityType === 'NEW_YEAR' ||
                    ActivityForm.activityType === 'STORE_NEW'
                  "
                >
                  <el-form-item label="活动开始时间" prop="activityTimeStart">
                    <el-date-picker
                      v-model="ActivityForm.activityTimeStart"
                      type="datetime"
                      placeholder="请选择活动开始时间"
                      class="w-300"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="8"
                  v-if="
                    ActivityForm.activityType === 'NEW_YEAR' ||
                    ActivityForm.activityType === 'STORE_NEW'
                  "
                >
                  <el-form-item label="活动结束时间" prop="activityTimeEnd">
                    <el-date-picker
                      v-model="ActivityForm.activityTimeEnd"
                      type="datetime"
                      placeholder="请选择活动结束时间"
                      class="w-300"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="6"
                  v-if="ActivityForm.activityType === 'MEMBER_DAY'"
                >
                  <el-form-item
                    label="会员日活动新会员赠送金额"
                    prop="newMoney"
                  >
                    <el-input-number
                      v-model="ActivityForm.newMoney"
                      :precision="0"
                      :step="1"
                      :min="0"
                      placeholder="请输入"
                      class="w-100 text-left"
                      :controls="false"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col
                  :span="8"
                  v-if="ActivityForm.activityType === 'NEW_YEAR'"
                >
                  <el-form-item label="会员卡使用状态" prop="CARD_USE">
                    <el-radio v-model="ActivityForm.CARD_USE" label="Y"
                      >禁用</el-radio
                    >
                    <el-radio v-model="ActivityForm.CARD_USE" label="N"
                      >不禁用</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="contanctItem">
                    <el-button
                      type="primary"
                      @click="OpenItemForm"
                      v-if="ActivityForm.activityType === 'NEW_YEAR'"
                      >关联项目</el-button
                    >
                    <el-button type="primary" @click="OpenStoreForm"
                      >关联门店</el-button
                    >
                    <el-button
                      type="primary"
                      @click="OpenMemberForm"
                      v-if="ActivityForm.activityType === 'MEMBER_DAY'"
                      >会员日活动日期配置</el-button
                    >
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  v-if="
                    ActivityForm.activityType === 'MEMBER_DAY' ||
                    ActivityForm.activityType === 'STORE_NEW'
                  "
                >
                  <el-form-item label="续充加赠" prop="giveMoneyValue">
                    <el-select
                      v-model="ActivityForm.giveMoneyValue"
                      placeholder="请选择"
                      @change="SelectGiveMoneyData"
                    >
                      <el-option
                        v-for="item in AllSelectList"
                        :key="item.confId"
                        :label="item.confStr"
                        :value="item.confId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 新年活动 -->
            <div
              class="tableList"
              v-if="ActivityForm.activityType === 'NEW_YEAR'"
            >
              <div class="tableList-title">新年活动</div>
              <el-table :data="ActivityForm.itemConf">
                <el-table-column prop="itemName" label="项目名称">
                </el-table-column>
                <el-table-column prop="itemPrice" label="项目价格">
                </el-table-column>
                <el-table-column prop="addMoney" label="项目增加金额">
                </el-table-column>
                <el-table-column prop="awardMoney" label="提成金额">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="{ $index }">
                    <el-button size="mini" type="text" @click="DelItem($index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 会员日活动 -->
            <div
              class="tableList"
              v-if="ActivityForm.activityType === 'MEMBER_DAY'"
            >
              <div class="tableList-title">会员日活动日期配置</div>
              <el-table :data="ActivityForm.dayTime">
                <el-table-column prop="day" label="天"> </el-table-column>
                <el-table-column prop="timeStart" label="开始时间">
                </el-table-column>
                <el-table-column prop="timeEnd" label="结束时间">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="{ $index }">
                    <el-button
                      size="mini"
                      type="text"
                      @click="DelMemberItem($index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 新店开业 -->
            <div
              class="tableList"
              v-if="
                ActivityForm.activityType === 'STORE_NEW' ||
                ActivityForm.activityType === 'MEMBER_DAY'
              "
            >
              <div class="tableList-title">续充加赠</div>
              <el-table :data="ActivityForm.giveMoneyList">
                <el-table-column prop="confMoneyUp" label="上限金额">
                </el-table-column>
                <el-table-column prop="confMoneyDown" label="下限金额">
                </el-table-column>
                <el-table-column prop="confGiveMoney" label="赠送金额" sortable>
                </el-table-column>
                <el-table-column prop="money" label="额外赠送金额" width="250">
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.money"
                      :precision="2"
                      :step="1"
                      :min="1"
                      placeholder="请输入"
                      class="w-100 text-left"
                      :controls="false"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="{ $index }">
                    <el-button
                      size="mini"
                      type="text"
                      @click="DelStoreNewItem($index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="footer_btn">
              <el-button class="cancel_btn" @click="CanceluserSubmit"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="userSubmit"
                :loading="CreateClienLoading"
                >确 定</el-button
              >
            </div>
          </span>
        </div>
      </el-dialog>

      <!-- 关联项目 -->
      <el-dialog
        title="关联项目"
        :visible.sync="AllItemdialogVisible"
        width="500px"
        :before-close="handleClose"
      >
        <div class="AllItemBox">
          <el-form
            :model="ActivityForm"
            :rules="SelectItemFormRules"
            ref="SelectItemForm"
            class="demo-ruleForm"
          >
            <div @click="SelectChange" class="CheckStore">
              <el-form-item label="关联项目" prop="itemName">
                <el-input
                  readonly
                  v-model="ActivityForm.itemName"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item label="项目增加金额" prop="addMoney">
              <el-input-number
                v-model="ActivityForm.addMoney"
                :min="0"
                :max="100000000000"
                label="请输入"
                class="w-100 text-left"
                :controls="false"
              ></el-input-number
            ></el-form-item>
            <el-form-item label="提成金额" prop="awardMoney">
              <el-input-number
                v-model="ActivityForm.awardMoney"
                :min="0"
                :max="100000000000"
                label="请输入"
                class="w-100 text-left"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="CloseItem">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 设置门店 -->
      <!-- <Items ref="Items" @change="changeStores"></Items> -->

      <stores ref="stores" @change="ChangeStore"></stores>

      <el-dialog
        :visible.sync="projectSortdialogVisible"
        width="450px"
        title="关联门店"
        class="no-dialog-padding"
        :before-close="handleCloseStore"
      >
        <span>
          <div class="source_box">
            <el-form
              ref="projectSortForm"
              :rules="projectSortRules"
              :model="projectSortForm"
            >
              <el-row>
                <el-form-item
                  label="应用门店"
                  prop="storeName"
                  class="storeName"
                >
                  <div @click="clikApplyStore" class="selsectbox">
                    <el-input
                      v-model="projectSortForm.storeName"
                      placeholder="请选择应用门店"
                      readonly
                    ></el-input>
                  </div>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="handleCloseStore"
            >取 消</el-button
          >
          <el-button type="primary" @click="SortSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 会员日活动日期配置 -->
      <el-dialog
        title="会员日活动日期配置"
        :visible.sync="MemberActivityVisible"
        width="500px"
        :before-close="MemberActivityHandleClose"
      >
        <div class="AllItemBox">
          <el-form
            :model="MemberActivityForm"
            :rules="MemberActivityFormRules"
            ref="MemberActivityForm"
            class="demo-ruleForm"
          >
            <el-form-item label="天" prop="day">
              <el-select
                v-model="MemberActivityForm.day"
                placeholder="请选择"
                class="w-100"
              >
                <el-option
                  v-for="item in dayOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间" prop="timeStart">
              <el-time-picker
                v-model="MemberActivityForm.timeStart"
                placeholder="请选择"
                class="w-100"
                value-format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="timeEnd">
              <el-time-picker
                v-model="MemberActivityForm.timeEnd"
                value-format="HH:mm:ss"
                placeholder="请选择"
                class="w-100"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="MemberActivityHandleClose">取 消</el-button>
          <el-button type="primary" @click="MemberActivitySubmit"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getActivityPage,
  CreateActivity,
  UpdateActivity,
  getActivity,
  DeleteActivity,
  getAllItem,
  getRechargeAll,
} from "@/api/bpm/activity";

import Items from "@/components/Stores/itemModel";
import stores from "@/components/Stores/index";

export default {
  name: "Storeactivitymanager",
  components: { Items, stores },
  data() {
    return {
      MemberActivityVisible: false,
      MemberActivityForm: {
        day: "",
        timeStart: "",
        timeEnd: "",
      },
      MemberActivityFormRules: {
        day: [{ required: true, message: "请选择天", trigger: "change" }],
        timeStart: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        timeEnd: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
      },
      // dayTime: [], // 存放会员日活动日期配置的列表数据

      // 下拉框展示1-30天的数据 选择天
      dayOptions: [],

      projectSortForm: {
        storeId: [],
        storeName: "",
        itemStoreTypeBondList: [],
      },
      projectSortdialogVisible: false, // 项目分类
      projectSortLoading: false,
      loading: false,
      projectSortRules: {
        storeId: [
          { required: true, message: "请选择应用门店", trigger: "change" },
        ],
      },
      ActivityForm: {
        activityName: "", // 活动名称
        activityTimeStart: "", // 活动开始时间
        activityTimeEnd: "", // 活动结束时间
        CARD_USE: "",
        activityType: "",
        activityId: "",
        itemName: "",
        addMoney: "",
        awardMoney: "",
        dayTime: [], // 会员日活动日期配置
        giveMoneyList: [], // 续充加赠
        discount: "", // 会员日活动折扣
        newMoney: "", // 会员日活动新会员赠送金额
        giveMoneyValue: "",
      },
      ActivityRules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        activityTimeStart: [
          { required: true, message: "请选择活动开始时间", trigger: "blur" },
        ],
        activityTimeEnd: [
          { required: true, message: "请选择活动结束时间", trigger: "blur" },
        ],
        activityType: [
          { required: true, message: "请选择活动类型", trigger: "blur" },
        ],
        CARD_USE: [
          {
            required: true,
            message: "请选择会员卡使用状态",
            trigger: "change",
          },
        ],
      },
      SelectItemFormRules: {
        addMoney: [
          { required: true, message: "请输入项目增加金额", trigger: "blur" },
        ],
        awardMoney: [
          { required: true, message: "请输入提成金额", trigger: "blur" },
        ],
        itemName: [{ required: true, message: "请选择", trigger: "change" }],
      },
      itemConf: [],
      storeIds: [],

      ActivityOptions: [
        {
          value: "NEW_YEAR",
          label: "新年活动",
        },
        {
          value: "MEMBER_DAY",
          label: "会员日活动",
        },
        {
          value: "STORE_NEW",
          label: "新店开业",
        },
      ],

      AllItemdialogVisible: false,

      users: [],

      StoresRules: {
        storeName: [
          { required: true, message: "请选择应用门店", trigger: "change" },
        ],
      },

      userdialogVisible: false, // 新增
      loading: false,
      tabList: [],
      title: "",
      userloading: false,
      totals: 0,
      CreateClienLoading: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        activityName: "", // 活动名称
        date: [],
        activityTimeStart: "", // 活动开始时间
        activityTimeEnd: "", // 活动结束时间
      },
      total: 0,

      ActivityObj: {},
      AllSelectList: [], // 查询充值规则下拉框数据
      SelectObjs: {}, // 续充加赠下拉框选中数据
    };
  },

  created() {
    this.getList();
  },

  mounted() {},

  methods: {
    SelectGiveMoneyData(e) {
      console.log("e", e);

      if (!e) {
        return false;
      }

      this.ActivityForm.giveMoneyList.push({
        confId: this.SelectObjs[e].confId,
        confMoneyUp: this.SelectObjs[e].confMoneyUp,
        confMoneyDown: this.SelectObjs[e].confMoneyDown,
        confGiveMoney: this.SelectObjs[e].confGiveMoney,
        // money: this.SelectObjs[e].money,
      });
      this.$nextTick(() => {
        this.ActivityForm.giveMoneyValue = "";
        this.getAllSelect();
      });
    },

    // 获取天数
    getDays() {
      let days = [];
      if (!!this.ActivityForm.dayTime) {
        days = this.ActivityForm.dayTime.map((item) => {
          return item.day;
        });
      }
      // 循环31天数值
      let dayOptions = [];
      for (let i = 0; i < 31; i++) {
        dayOptions.push({
          label: i + 1,
          value: i + 1,
        });
      }
      let newDays = [];
      for (let i = 0; i < dayOptions.length; i++) {
        let Item = dayOptions[i];
        // console.log("hahahahhaha",Item);
        if (Item.label && days.includes(Item.label) === false) {
          newDays.push(Item);
        }
      }
      this.dayOptions = newDays;
      // console.log("aa",this.dayOptions);
    },

    // 查询充值规则下拉框
    getAllSelect() {
      let itemIds = [];
      if (!!this.ActivityForm.giveMoneyList) {
        itemIds = this.ActivityForm.giveMoneyList.map((item) => {
          return item.confId;
        });
      }

      getRechargeAll({}).then((response) => {
        const { code, data } = response;
        if (code === 0) {
          // this.AllSelectList = data;
          let newArrs = [];
          console.log("ssff", itemIds);
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.confId && itemIds.includes(element.confId) === false) {
              newArrs.push(element);
            }
          }
          this.AllSelectList = newArrs;
          let SelectObj = {};
          for (let i = 0; i < this.AllSelectList.length; i++) {
            let eles = this.AllSelectList[i];
            SelectObj[eles.confId] = eles;
          }
          console.log(SelectObj, "obj");
          this.SelectObjs = SelectObj;

          // 过滤数据
          // let newArrs = [];
          // for (let i = 0; i < this.ActivityForm.giveMoneyList.length; i++) {
          //   let item = this.ActivityForm.giveMoneyList[i];
          //   // 判断this.ActivityForm.giveMoneyList的列表数据是否包含在续充加赠的下拉数据里面 如果包含 则将下拉数据的数据去除
          //   if (this.AllSelectList === item.confId) {
          //     newArrs.push(item);
          //   }
          // }
          // this.ActivityForm.getActivityList = newArrs;
          // console.log("z",this.itemConf);
        }
      });
    },
    // 打开会员日活动日期配置
    OpenMemberForm() {
      this.MemberActivityVisible = true;
      this.getDays();
    },
    MemberActivitySubmit() {
      this.$refs["MemberActivityForm"].validate((valid) => {
        if (valid) {
          // 新添加的数据判断是否和上次数据重复 重复则不添加
          let ErrorTime = []; // 存放错误数据的数组
          const Currentday = this.MemberActivityForm.day;
          for (let i = 0; i < this.ActivityForm.dayTime.length; i++) {
            let ele = this.ActivityForm.dayTime[i];
            if (Currentday === ele.day) {
              ErrorTime.push(ele);
            }
          }

          if (ErrorTime.length > 0) {
            this.$message({
              message: "请勿重复添加",
              type: "error",
            });
            return false;
          } else {
            this.ActivityForm.dayTime.push({
              day: this.MemberActivityForm.day,
              timeStart: this.MemberActivityForm.timeStart,
              timeEnd: this.MemberActivityForm.timeEnd,
            });
            this.MemberActivityHandleClose();
          }
        } else {
        }
      });
    },

    // 删除活动日期配置数据
    DelMemberItem(index) {
      let arr = JSON.parse(JSON.stringify(this.ActivityForm.dayTime));
      arr.splice(index, 1);
      this.ActivityForm.dayTime = arr;
      this.getDays();
    },

    // 删除续充加赠数据
    DelStoreNewItem(index) {
      let arrs = JSON.parse(JSON.stringify(this.ActivityForm.giveMoneyList));
      arrs.splice(index, 1);
      this.ActivityForm.giveMoneyList = arrs;
      this.$nextTick(() => {
        this.getAllSelect();
      });
    },

    MemberActivityHandleClose() {
      this.resetFormData("MemberActivityForm");
      this.$nextTick(() => {
        this.MemberActivityVisible = false;
      });
    },

    OpenStoreForm() {
      this.projectSortdialogVisible = true;
      this.projectSortForm.storeName;
      this.projectSortForm.storeName =
        this.projectSortForm.itemStoreTypeBondList
          .map((item) => {
            return item.name;
          })
          .join(",");
      // console.log("lxy", this.projectSortForm.storeName);
    },
    clikApplyStore() {
      this.$nextTick(() => {
        this.$refs.stores.applyStore(
          this.projectSortForm.itemStoreTypeBondList
        );
        this.$refs.stores.getStoresList(); // 调用子组件的方法
      });
    },

    SortSubmit() {
      // this.projectSortdialogVisible = false;
      this.$refs["projectSortForm"].validate((valid) => {
        if (valid) {
          this.projectSortdialogVisible = false;
          this.storeIds = this.projectSortForm.storeId;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleCloseStore() {
      this.resetFormData("projectSortForm");
      this.$nextTick(() => {
        this.projectSortdialogVisible = false;
        this.projectSortLoading = false;
        // this.projectSortForm.itemStoreTypeBondList = [];
      });
    },
    ChangeStore(res) {
      console.log(res);
      // console.log(this.projectSortForm.itemStoreTypeBondList);
      const { storeName, list, storeId } = res;
      this.projectSortForm.storeName = storeName;
      this.projectSortForm.itemStoreTypeBondList = list.map((item) => {
        return { id: item.id, name: item.name };
      });
      this.projectSortForm.storeId = storeId;

      console.log(this.projectSortForm);
    },

    // 删除活动
    DelItem(index) {
      let old = JSON.parse(JSON.stringify(this.itemConf));
      old.splice(index, 1);
      this.itemConf = old;
    },

    OpenItemForm() {
      this.AllItemdialogVisible = true;
    },

    handleClose() {
      this.AllItemdialogVisible = false;
      this.resetFormData("SelectItemForm");
      this.ActivityForm.itemList = [];
      this.ActivityForm.itemName = "";
    },

    CloseItem() {
      this.$refs["SelectItemForm"].validate((valid) => {
        if (valid) {
          let itemConf = [];
          for (
            let index = 0;
            index < this.ActivityForm.itemList.length;
            index++
          ) {
            const element = this.ActivityForm.itemList[index];
            // console.log("7", element);
            itemConf.push({
              itemName: element.itemName,
              itemId: element.itemId,
              itemPrice: element.itemPrice,
              addMoney: this.ActivityForm.addMoney,
              awardMoney: this.ActivityForm.awardMoney,
            });
          }
          this.itemConf = this.itemConf.concat(itemConf);
          //   console.log("aa", this.itemConf);
          this.AllItemdialogVisible = false;
          this.handleClose();
        } else {
        }
      });
    },

    // changeStores(res) {
    //   // console.log(res);
    //   const { itemName, list } = res;
    //   let itemList = list.map((item) => {
    //     return {
    //       itemId: item.itemId,
    //       itemName: item.itemName,
    //       itemPrice: item.itemPrice,
    //     };
    //   });
    //   this.$nextTick(() => {
    //     this.ActivityForm.itemName = itemName;
    //     this.ActivityForm.itemList = itemList;
    //     // this.$forceUpdate();
    //   });

    //   // this.$set(this.ActivityForm, "itemName", itemName);
    //   // this.$set(this.ActivityForm, "itemList", itemList);
    //   // console.log("DSDS", this.ActivityForm.itemName);
    // },

    SelectChange() {
      console.log("1212");
      this.$refs.Items.applyStore(this.ActivityForm.itemList);
      let itemIds = this.itemConf.map((item) => {
        return item.itemId;
      });
      console.log(itemIds, "sjajsj");
      this.$refs.Items.getItemsList(itemIds); // 调用子组件的方法
    },

    // 查询所有项目
    getAllItemList() {
      getAllItem({}).then((response) => {
        const { code, data } = response;
        if (code === 0) {
          this.itemConf = data;
        }
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryParams");
      this.handleQuerys();
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    handleQuerys() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    // 活动列表
    getList() {
      this.loading = true;

      let query = JSON.parse(JSON.stringify(this.queryParams));
      if (!!query.date) {
        (query.activityTimeStart = this.queryParams.date[0]),
          (query.activityTimeEnd = this.queryParams.date[1]);
        delete query.date;
      }

      getActivityPage(query)
        .then((res) => {
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.tabList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CanceluserSubmit() {
      this.ActivityForm.activityId = "";
      this.itemConf = [];
      // this.$refs["ActivityForm"].resetFields();
      this.resetFormData("ActivityForm"); // 重置表单数据
      this.$nextTick(() => {
        this.userdialogVisible = false;
      });
      this.ActivityForm.dayTime = [];
      this.ActivityForm.giveMoneyList = [];
    },

    // 新增活动
    userSubmit() {
      this.$refs["ActivityForm"].validate((valid) => {
        if (valid) {
          // 判断开始时间不能大于结束时间
          console.log(new Date(this.ActivityForm.activityTimeStart).getTime()); // 1713196800000
          console.log(this.ActivityForm.activityTimeStart); // 2024-04-16 00:00:00

          if (
            new Date(this.ActivityForm.activityTimeStart).getTime() >
            new Date(this.ActivityForm.activityTimeEnd).getTime()
          ) {
            this.$message({
              message: "开始时间不能大于结束时间",
              type: "error",
            });
            return false;
          }

          if (!!this.ActivityForm.activityId) {
            this.getUpdateActivity();
          } else {
            this.getCreateActivity();
          }
        } else {
        }
      });
    },

    getdata() {
      let forms = JSON.parse(JSON.stringify(this.ActivityForm));
      const { CARD_USE } = forms;
      let obj = {
        activityConfType: "CARD_USE",
        activityConfVal: CARD_USE,
      };

      let itemConf = {
        activityConfType: "LINK_ITEM",
        itemConf: this.itemConf,
      };

      let storeIds = {
        activityConfType: "LINK_STORE",
        storeIds: this.storeIds,
      };

      forms.confDOS = [obj, itemConf, storeIds];
      forms.dayTime = this.ActivityForm.dayTime;
      forms.dayTime = this.ActivityForm.dayTime;

      return forms;
    },

    // 新建活动 创建接口
    getCreateActivity() {
      let forms = this.getdata();
      CreateActivity(forms)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.CanceluserSubmit();
            this.$message.success("操作成功");
            this.getList();
          }
        })
        .catch((err) => {});
    },

    // 编辑活动 编辑接口
    getUpdateActivity() {
      let forms = this.getdata();
      forms.activityId = this.ActivityForm.activityId;

      UpdateActivity(forms)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.CanceluserSubmit();
            this.$message.success("操作成功");
            this.getList();
          }
        })
        .catch((err) => {});
    },

    clearData() {
      this.projectSortForm.itemStoreTypeBondList = [];
      this.projectSortForm.storeName = "";
      this.storeIds = [];
    },

    // 新增活动
    NewActivity() {
      this.ActivityForm.activityId = "";
      this.ActivityForm.activityType = "NEW_YEAR";
      this.clearData();
      this.$nextTick(() => {
        this.userdialogVisible = true;
      });
      this.title = "新增活动";
      this.getAllSelect();
      this.getDays();
    },

    // 编辑活动
    UpdatesActivity(row) {
      this.userdialogVisible = true;
      this.ActivityForm.activityId = row.activityId;
      this.title = "编辑活动";
      this.$nextTick(() => {
        this.getActivityList(row.activityId);
      });
      // this.getAllSelect();
    },

    // 获得门店活动
    getActivityList(activityId) {
      getActivity({
        activityId: activityId,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.ActivityObj = data;
            this.ActivityForm.activityName = data.activityName;
            this.ActivityForm.activityTimeStart = data.activityTimeStart;
            this.ActivityForm.activityTimeEnd = data.activityTimeEnd;
            this.ActivityForm.activityType = data.activityType;
            this.ActivityForm.activityId = data.activityId;
            this.ActivityForm.itemName = data.itemName;
            this.storeIds = data.storeDOList.map((item) => {
              return item.id;
            });
            this.projectSortForm.storeName = data.storeDOList.map((item) => {
              return item.name;
            });
            this.projectSortForm.storeName =
              this.projectSortForm.storeName.join(",");
            this.projectSortForm.storeId = data.storeDOList.map((item) => {
              return item.id;
            });
            this.projectSortForm.itemStoreTypeBondList = data.storeDOList.map(
              (item) => {
                return {
                  id: item.id,
                  name: item.name,
                };
              }
            );

            this.ActivityForm.dayTime = data.dayTime.map((item) => {
              return {
                day: item.day,
                timeStart: item.timeStart,
                timeEnd: item.timeEnd,
              };
            });
            this.ActivityForm.giveMoneyList = data.giveMoneyList.map((item) => {
              return {
                confGiveMoney: item.confGiveMoney,
                confId: item.confId,
                confMoneyDown: item.confMoneyDown,
                confMoneyUp: item.confMoneyUp,
                money: item.money,
              };
            });
            this.ActivityForm.newMoney = data.newMoney;
            this.ActivityForm.discount = data.discount;
            for (let index = 0; index < data.confDOS.length; index++) {
              const element = data.confDOS[index];
              if (element.activityConfType === "CARD_USE") {
                this.ActivityForm.CARD_USE = element.activityConfVal;
              } else if (element.activityConfType === "LINK_ITEM") {
                this.itemConf = element.itemConf;
              }
            }
            // let itemIds = this.ActivityForm.giveMoneyList.map((item) => {
            //   // let item = this.ActivityForm.giveMoneyList[i];
            //   return item.confId;
            // });
            // console.log("itemIds", itemIds);
            // this.getAllSelect(itemIds);

            // console.log("xixixix", this.ActivityForm.dayTime);

            this.getDays();
        this.getAllSelect();
          }
        })
        .catch((err) => {});
    },

    // 删除活动
    DelActivity(row) {
      this.$confirm("活动删除后将无法撤回, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteActivity({ id: row.activityId })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$modal.msgSuccess("操作成功");
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}
.separate_right {
  width: 1px;
  height: 14px;
  //   background: #e9e9e9;
  margin-left: 12px;
  margin-right: 12px;
}
.pwd {
  text-security: disc;
  -webkit-text-security: disc;
}

.formBox {
  padding: 0 24px;
}
// .AllItemBox {
//   margin: 10px;
// }

// .CheckStore {
//   margin: 0 20px;
// }

/* 防止打开对话框时页面的抖动 */
body {
  padding-right: 0px !important;
  overflow: hidden;
}

.selsectbox {
  margin: 0 24px;
}
.storeName {
  padding-left: 24px;
}
.footer_btn {
  margin-top: 20px;
  text-align: right;
  margin-right: 20px;
  margin-bottom: 20px;
}

.AddRules_box {
  padding: 0 24px;
  .Rules_form_box {
    display: flex;
    .Rules_form_select {
      margin-right: 10px;
    }
  }
}
.up_ipt {
  width: 300px;
  margin-right: 20px;
}
.down_ipt {
  width: 300px;
  margin-left: 10px;
}
.contanctItem {
  margin-bottom: 20px;
}
.tableList-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  padding-top: 10px;
}
</style>
